<template>
  <wd-config-provider :themeVars="themeVars">
    <view class="layout-default">
      <c-navbar :title="title" :leftArrow="showBack" @click-left="handleClickLeft" />
      <view class="layout-default__content">
        <slot />
      </view>
    </view>

    <loginPopup
      v-if="page.route !== 'pages/userServiceAgreement/index'"
      ref="loginRef"
      @reload="handleReload"
    />
    <wd-toast />
    <wd-message-box />
  </wd-config-provider>
</template>

<script lang="ts" setup>
  import { navigateBack, redirectTo } from '@/utils/router';
  import type { ConfigProviderThemeVars } from 'wot-design-uni';
  import { pages, subPackages } from '@/pages.json';
  import loginPopup from '@/pages/components/loginPopup.vue';
  import { useUserStore } from '@/store/user';

  const themeVars: ConfigProviderThemeVars = {
    // colorTheme: 'red',
    buttonPrimaryBgColor: '#FF800E',
    buttonLargeRadius: '20rpx',
    buttonMediumRadius: '20rpx',
    // buttonPrimaryColor: '#FF800E',
    navbarColor: '#26292C',
    navbarTitleFontSize: '34rpx',
    navbarBackground: 'transparent',
    navbarHeight: '88rpx',
    tabbarHeight: '130rpx',
    tabbarItemIconSize: '40rpx',
    tabbarItemTitleLineHeight: '40rpx',
    searchInputHeight: '80rpx',
    searchInputRadius: '12rpx',
    searchInputBg: 'rgba(62,70,84,0.05)',
    searchInputFs: '26rpx',
    searchIconColor: 'rgba(62,70,84,0.55)',
    searchIconSize: '32rpx',
    textareaBg: 'rgba(62,70,84,0.05)',
    textareaColor: '#3E4654',
    dividerPadding: '0rpx 0rpx',
  };
  const currentPages = getCurrentPages();
  const page = currentPages.at(-1) as any;
  const title = ref('');
  const showBack = ref(true);

  if (page.route === 'pages/tabbarIndex/index') {
    showBack.value = false;
  }
  const subPackagesList = JSON.parse(JSON.stringify(subPackages));
  const pagesList = [
    ...pages,
    ...subPackagesList
      .map((item) => {
        item.pages.forEach((el) => {
          el.path = item.root + '/' + el.path;
        });
        return item.pages;
      })
      .flat(),
  ];

  pagesList.forEach((item) => {
    if (item.path === page.route) {
      title.value = item.style.navigationBarTitleText;
    }
  });

  const handleClickLeft = () => {
    if (currentPages.length > 1) {
      navigateBack();
    } else {
      redirectTo('/pages/tabbarIndex/index');
    }
  };
  const loginRef = ref<InstanceType<typeof loginPopup>>();

  const handleReload = () => {
    redirectTo('/' + page.route);
  };

  watch(
    () => useUserStore().isLogined,
    (newVal) => {
      console.log(page.route);
      if (!newVal && page.route !== 'pages/userServiceAgreement/index') {
        console.log(1);
        loginRef.value?.open();
      }
    },
    { immediate: true },
  );
</script>
<style lang="scss">
  .layout-default {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .layout-default__content {
      flex: 1 0 0;
      height: 100%;
      overflow-y: auto;
    }
  }
</style>
